<template>
  <div>
    <div class="scrollwarp" :style="{ height }">
        <div class="warp">
          <div class="top">
            <div class="nav">
              <van-icon name="arrow-left" @click="back" />
              <div class="title">购物车</div>
            </div>
            <van-notice-bar scrollable left-icon="volume-o" text="一大波福利即将来袭" />
            <p>共{{ cartData.length }}件宝贝</p>
          </div>
          <div class="warp_" :style="{ height:this.car.height + 'px' }">
            <div class="cartlistwarp"  ref="he">
              <!-- 商品 -->
              <div class="cartlist" v-for="(item,index) in cartData" :key="item.childBrandId">
                <!-- 单选 -->
                <div class="input_">
                  <input type="checkbox" v-model="ischecked"/>
                </div>
                <!-- 图片            -->
                <div class="left">
                  <img :src="item.img" alt />
                </div>
                <!-- 中间信息 -->
                <div class="center">
                  <p>{{ item.name }}</p>
                  <p>{{ item.supplierTitle }}</p>
                  <ul>
                    <li>￥{{ item.officialPrice*item.num }}</li>
                    <li>
                      <button name="arrow-left" @click="incr(index,item.num)">-</button>
                      <p>{{ item.num }}</p>
                      <button @click="decr(index)">+</button>
                    </li>
                  </ul>
                </div>
                <div class="right">
                  <button @click="dele(item.goodsid)">x</button>
                </div>
              </div>
            </div>
          </div>
          <!-- 提交订单 -->
        </div>
    </div>
    <div>
      <van-submit-bar :price="cartTotalPrice*100" button-text="提交订单" @submit="onSubmit">
        <van-checkbox v-model="checked" @click="fnn">全选</van-checkbox>
      </van-submit-bar>
    </div>
  </div>
</template>

<script>
import { Toast } from "vant";
//引入滚动
import BetterScroll from "better-scroll";
import { mapState } from "vuex";
import { mapGetters } from "vuex";
export default {
  data() {
    return {
      car:{
        height:0,
      },
      height: 0,
      //滚动对象
      scroll: null,
      checked: false,
      ischecked: false,
    };
  },
  mounted() {
    //外层滚动容器高度
    this.height = document.documentElement.clientHeight - 50 + "px";
   
    this.car.height = this.$refs.he.clientHeight - 50*1
  },

  methods: {
    
    back() {
      this.$router.go(-1);
    },
    //减
    incr(index, num) {
      // console.log(num);
      if (num > 1) {
        this.$store.dispatch("incr", index);
      }
    },
    //加
    decr(index) {
      this.$store.dispatch("decr", index);
    },
    dele(goodsid) {
      Toast('成功删除');
      this.$store.dispatch("dele", goodsid);
    },
    onSubmit() {
      Toast.fail("余额不足");
    },
    fnn(){
      this.ischecked = !this.ischecked
    }
  },
  computed: {
    ...mapState(["cartData"]),
    ...mapGetters(["cartTotalPrice"]),
  },
  created() {
    this.$bus.$emit("yincan", false);
    this.$store.dispatch("cart", JSON.stringify(this.item));
  },
  beforeDestroy() {
    this.scroll = null;
    this.$bus.$emit("yincan", true);
  },
  updated() {
    this.$nextTick(() => {
      this.scroll = new BetterScroll(".scrollwarp", {
        click: true,
      });
    });
     
  },
};
</script>

<style lang="scss" scoped>
.scrollwarp {
  // width: 100%;
  overflow: hidden;
}
.top {
  height: 200px;
  background: rgb(44, 44, 44);
  .nav {
    padding-top: 15px;
    padding-left: 10px;
    .van-icon {
      float: left;
      font-size: 25px;
      color: #fff;
      margin-right: 50px;
    }
    .title {
      color: #fff;
      text-align: center;
      font-size: 20px;
      float: left;
    }
  }
  .van-notice-bar {
    margin-top: 40px;
    width: 100%;
    height: 25px;
  }
  p {
    color: #fff;
    font-size: 14px;
    margin-left: 10px;
    padding-top: 15px;
  }
}
.cartlistwarp {
  width: 100%;
  position: absolute;
  // background: crimson;
  top: 135px;
  padding-left: 18px;
  overflow: hidden;
  .cartlist {
    background: rgb(243, 240, 240);
    width: 90%;
    height: 130px;
    border-radius: 10px;
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin-top: 15px;
    .input_ {
      height: 100px;
      width: 5%;
      // background: cyan;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-left: 5px;
      margin-right: 5px;
      input[type="checkbox"] {
        width: 20px;
        height: 20px;
        -webkit-appearance: radio;
      }
    }
    .left {
      height: 100px;
      width: 100px;
      // background: green;
      margin-right: 10px;
      img {
        height: 100%;
      }
    }
    .center {
      height: 100px;
      width: 50%;
      // background:darkkhaki;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      p:nth-of-type(1) {
        font-size: 15px;
      }
      p:nth-of-type(2) {
        font-size: 14px;
        color: #999;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      ul {
        display: flex;
        justify-content: space-between;
        li:nth-of-type(1) {
          font-size: 17px;
          color: rgb(226, 118, 17);
        }
        li:nth-of-type(2) {
          display: flex;
          justify-content: space-between;
          p {
            text-align: center;
            line-height: 20px;
            width: 20px;
            height: 20px;
          }
          button {
            width: 20px;
            height: 20px;
          }
        }
      }
    }
    .right {
      height: 100px;
      width: 5%;
      // background: papayawhip;
      display: flex;
      align-items: center;
      margin-right: 5px;
      margin-left: 5px;
      button{
        width:20px;
        height: 20px;
      }
    }
  }
}
// .warp_{
//   height:675px;
// }
</style>